<template>
    <div class="myMessageContainer">
        <div class="myMessageContent">
            <div class="back" @click="goBack"></div>
            <p class="title">我的消息</p>
            <div class="other"></div>
        </div>
        <div class="allMessage">
            <div class="allMessageContent">
                <div class="request" @click="gotoReply">
                    <div class="requestImg"></div>
                    <p class="requestTitle">匿名回复</p>
                </div>
                <div class="comment" @click="gotoForum">
                    <div class="commentImg"></div>
                    <p class="commentTitle">论坛评论</p>
                </div>
            </div>
        </div>
        <div class="messageContainer">
            <ul class="messages">
                <li v-for="message in messages" :key="message.id">
                    <router-link :to="{
                        name:'myChat',
                        query:{
                            name:message.userName
                        }
                    }">
                        <div class="message">
                            <div class="user">
                                <div class="messageImg"></div>
                                <div class="userInfo">
                                    <p class="name">{{ message.userName }}</p>
                                    <p class="userSay">{{ message.userSay }}</p>
                                </div>
                            </div>
                            <div class="moreInfo">
                                <p class="time" v-if="message.messageHour && ifShow(message.id)">{{ nowTime(message.id) }}小时前</p>
                                <p class="time" v-if="message.messageMin && ifShow(message.id)">{{ nowTime(message.id) }}分钟前</p>
                                <p class="time" v-if="message.messageTime && ifShow(message.id)">{{ beforeTime(message.id) }}天前</p>
                                <p class="time" v-if="message.messageCanlendar && ifShow(message.id)">{{ messageMonth(message.id) }}-{{ messageDay(message.id) }}</p>
                                <div class="messageNum"><span>{{ message.num }}</span></div>
                            </div>
                        </div>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name:'myMessage',
        data(){
            return{
                messages:[
                    {id:0,userName:'hhhin',userSay:'hello!!',canlendar:'03-06',time:'23:12',num:3,messageHour:true,messageMin:false,messageTime:false,messageCanlendar:false},
                    {id:1,userName:'三分',userSay:'我昨天才去吃了很多好吃的，今天...',canlendar:'03-11',time:'10:12',num:1,messageHour:true,messageMin:false,messageTime:false,messageCanlendar:false},
                    {id:2,userName:'wzx',userSay:'我跟你说一件事',canlendar:'02-10',time:'23:12',num:10,messageHour:true,messageMin:false,messageTime:false,messageCanlendar:false},
                ],
            }
        },
        methods:{
            goBack(){
                this.$router.back()
            },
            gotoReply(){
                this.$router.push({
                    name:'myReply'
                })
            },
            gotoForum(){
                this.$router.push({
                    name:'forumComment'
                })
            },
            ifShow(id){
                let myDate=new Date()
                let nowHours=myDate.getHours()
                // let nowMin=myDate.getMinutes()
                let nowDay=''
                if(myDate.getDate()<10){
                    nowDay='0'+myDate.getDate()
                }
                else{
                    nowDay=''+myDate.getDate()
                }
                let nowMonth=''
                if((myDate.getMonth()+1)<10){
                    nowMonth='0'+(myDate.getMonth()+1)
                }
                else{
                    nowMonth=(myDate.getMonth()+1)
                }
                for(let i=0;i<this.messages.length;i++){
                    if(id===this.messages[i].id){
                        let messageHour=(this.messages[i].time.split(':'))[0]
                        // let messageMin=(this.messages[i].time.split(':'))[1]
                        let collectMonth=(this.messages[i].canlendar.split('-'))[0]
                        let collectDay=(this.messages[i].canlendar.split('-'))[1]
                        if(collectMonth<nowMonth){
                            this.messages[i].messageCanlendar=true
                            this.messages[i].messageMin=false
                            this.messages[i].messageTime=false
                            this.messages[i].messageHour=false
                        }
                        else if(collectMonth===nowMonth){
                            if(nowDay-collectDay>7){
                                this.messages[i].messageCanlendar=true
                                this.messages[i].messageMin=false
                                this.messages[i].messageTime=false
                                this.messages[i].messageHour=false
                            }
                            else if(nowDay-collectDay<7 && nowDay-collectDay>0){
                                this.messages[i].messageTime=true
                                this.messages[i].messageCanlendar=false
                                this.messages[i].messageMin=false
                                this.messages[i].messageHour=false
                            }
                            else if(nowDay===collectDay){
                                if(nowHours-messageHour>0){
                                    this.messages[i].messageHour=true
                                    this.messages[i].messageCanlendar=false
                                    this.messages[i].messageTime=false
                                    this.messages[i].messageMin=false
                                }
                                else{
                                    this.messages[i].messageMin=true
                                    this.messages[i].messageCanlendar=false
                                    this.messages[i].messageTime=false
                                    this.messages[i].messageHour=false
                                }
                            }
                        }
                    }
                }
                return true
            }
        },
        computed:{
            nowTime(){
                let myDate=new Date()
                let nowHours=myDate.getHours()
                let nowMin=myDate.getMinutes()
                return (id)=>{
                    for(let i=0;i<this.messages.length;i++){
                        if(id===this.messages[i].id){
                            let messageHour=(this.messages[i].time.split(':'))[0]
                            let messageMin=(this.messages[i].time.split(':'))[1]
                            if(nowHours>messageHour){
                                if(nowMin>=messageMin){
                                    return nowHours-messageHour
                                }
                                else{
                                    return nowHours-messageHour-1
                                }
                            }
                            else{
                                return nowMin-messageMin
                            }
                        }
                    }
                }
            },
            beforeTime(){
                let myDate=new Date()
                let nowDay=''
                if(myDate.getDate()<10){
                    nowDay='0'+myDate.getDate()
                }
                else{
                    nowDay=''+myDate.getDate()
                }
                return (id)=>{
                    for(let i=0;i<this.messages.length;i++){
                        if(id===this.messages[i].id){
                            let collectDay=(this.messages[i].canlendar.split('-'))[1]
                            return (''+(nowDay-collectDay))
                        }
                    }
                }
            },
            messageMonth(){
                return (id)=>{
                    for(let i=0;i<this.messages.length;i++){
                        if(id===this.messages[i].id){
                            let collectMonth=(this.messages[i].canlendar.split('-'))[0]
                            return collectMonth;
                        }
                    }
                }
            },
            messageDay(){
                return(id)=>{
                    for(let i=0;i<this.messages.length;i++){
                        if(id===this.messages[i].id){
                            let collectDay=(this.messages[i].canlendar.split('-'))[1]
                            return collectDay
                        }
                    }
                }
            }
        }
    }
</script>

<style scoped>
    .myMessageContainer{
        width: 100vw;
        height: 100vh;
        background-color: #F6F8FA;
        overflow-x:hidden;
        overflow-y: scroll;
        scrollbar-width: none; 
    }
    .myMessageContent{
        width: 6.86rem;
        height: 1.76rem;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        left:.32rem;
        z-index: 1;
        background-color: #F6F8FA;
    }
    .back{
        background-image: url(../assets/img/6-icon@2x/back.png);
        width: .32rem;
        height: 0.32rem;
        background-position: center;
        background-size: contain;
    }
    .title{
        font-family: 'PingFangSC-Mediuem';
        color:#333333;
        font-size: .36rem;
    }
    .other{
        width: .32rem;
        height: 0.32rem;
    }
    .allMessage{
        margin-top: 1.76rem;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .allMessageContent{
        width: 3.94rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .request,.comment{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .requestImg{
        background-image: url(../assets/img/7-icon@2x/7-2requesticon.png
        );
        background-size: contain;
        background-position: center;
        width: .88rem;
        height: .88rem;
        border-radius: .3rem;
    }
    .commentImg{
        background-image: url(../assets/img/7-icon@2x/7-1commenticon.png);
        background-size: contain;
        background-position: center;
        width: .88rem;
        height: .88rem;
        border-radius: .3rem;
    }
    .requestTitle,.commentTitle{
        margin-top: .2rem;
        font-family: 'PingFangSC-Mediuem';
        color: #333333;
        font-size: .28rem;
    }
    .messageContainer{
        width: 100%;
        margin-top: .7rem;
    }
    .messages{
        width: 6.86rem;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
    }
    .message{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: .6rem;
    }
    .user{
        display: flex;
        align-items: center;
    }
    .messageImg{
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        background-color: #FFF;
    }
    .userInfo{
        margin-left: .2rem;
        display: flex;
        flex-direction: column;
    }
    .name{
        font-family: 'PingFangSC-Mediuem';
        color: #333333;
    }
    .userSay{
        font-family: 'PingFangSC-Regular';
        color: #999999;
        font-size: .28rem;
        margin-top: .08rem;
    }
    .moreInfo{
        display: flex;
        flex-direction: column;
        align-items: end;
    }
    .time{
        font-family: 'PingFangSC-Regular';
        color: #999999;
        font-size: .28rem;
    }
    .messageNum{
        margin-top: .08rem;
        background-color:rgb(255, 71, 84);
        border-radius: 50%;
        color:#FFF;
        width: .4rem;
        height: .4rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .2rem;
    }
</style>